<template>
  <div class="publish-task-wrapper">
    <div class="publish-task-container">
      <div class="publish-task-header">
        <h1>发布任务</h1>
        <p>请填写任务的详细信息</p>
      </div>

      <form @submit.prevent="publishTask" class="publish-task-form">
        <div class="form-group">
          <label for="title">任务标题 *</label>
          <input 
            type="text" 
            id="title" 
            v-model="taskForm.title" 
            placeholder="请输入任务标题"
            required
          />
        </div>

        <div class="form-group">
          <label for="description">任务描述*</label>
          <textarea 
            id="description" 
            v-model="taskForm.description" 
            placeholder="请详细描述任务要求、交付标准等"
            rows="6"
            required
          ></textarea>
        </div>

        <div class="form-group">
          <label for="budget">任务预算 (元) *</label>
          <input 
            type="number" 
            id="budget" 
            v-model="taskForm.budget" 
            placeholder="请输入任务预算"
            min="0"
            step="0.01"
            required
          />
        </div>

        <div class="form-actions">
          <button type="button" @click="goBack" class="btn-secondary">返回</button>
          <button type="submit" class="btn-primary">发布任务</button>
        </div>
      </form>
    </div>
    
    <!-- 自定义弹窗 -->
    <MessageModal 
      :visible="modalVisible"
      :title="modalTitle"
      :message="modalMessage"
      :type="modalType"
      @close="closeModal"
      @confirm="handleModalConfirm"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import api from '../api/index.js'
import MessageModal from './MessageModal.vue'

const router = useRouter()
const taskForm = ref({
  title: '',
  description: '',
  budget: ''
})

// 弹窗相关状态
const modalVisible = ref(false)
const modalTitle = ref('')
const modalMessage = ref('')
const modalType = ref('info')
const successCallback = ref(null)

// 显示弹窗
const showModal = (title, message, type = 'info', callback = null) => {
  modalTitle.value = title
  modalMessage.value = message
  modalType.value = type
  modalVisible.value = true
  successCallback.value = callback
}

// 关闭弹窗
const closeModal = () => {
  modalVisible.value = false
}

// 处理弹窗确认
const handleModalConfirm = () => {
  if (successCallback.value) {
    successCallback.value()
  }
}

// 发布任务
const publishTask = async () => {
  try {
    const response = await api.post('/task/publish', {
      title: taskForm.value.title,
      description: taskForm.value.description,
      budget: parseFloat(taskForm.value.budget)
    })
    
    if (response.code === 0) {
      showModal('成功', '任务发布成功！', 'success', () => {
        router.push('/user')
      })
    } else {
      showModal('错误', '任务发布失败: ' + response.message, 'error')
    }
  } catch (error) {
    console.error('任务发布失败:', error)
    showModal('错误', '任务发布失败，请重试', 'error')
  }
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.publish-task-wrapper {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.publish-task-container {
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 40px);
  background: white;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  padding: 30px;
  margin: 0 auto;
  box-sizing: border-box;
}

.publish-task-header {
  text-align: center;
  margin-bottom: 30px;
}

.publish-task-header h1 {
  color: #333;
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 700;
}

.publish-task-header p {
  color: #666;
  font-size: 18px;
}

.publish-task-form {
  display: flex;
  flex-direction:column;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.form-group {
  display: flex;
  flex-direction:column;
  gap: 8px;
}

.form-group label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group textarea {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s;
  box-sizing: border-box;
  width: 100%;
}

.form-group input:focus,
.form-group textarea:focus {
  outline:none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}

.btn-primary,
.btn-secondary {
  padding: 12px 30px;
  border:none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor:pointer;
  transition: all 0.3s;
  min-width: 120px;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #f1f3f4;
  color: #333;
}

.btn-secondary:hover {
  background: #e2e6ea;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .publish-task-wrapper {
    padding: 15px;
  }
  
  .publish-task-container {
    padding: 20px;
  }
  
  .publish-task-header h1 {
    font-size: 28px;
  }
  
  .publish-task-header p {
    font-size: 16px;
  }
  
  .form-actions {
    flex-direction:column;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
}
</style>